/**
 * @Title: index.js
 * @Description: index
 * @author: Fanchao
 * @date: 2020/9/19 3:59 下午
 * @version V1.0
 */
import React, { useEffect, useState } from 'react';
import { connect, Link } from 'umi';
import styles from './index.less';
import { Button, Form, Input, Table, Select, Tag, Statistic } from 'antd';
import moment from 'moment';

const { Option } = Select;
const Product = ({ expertList: { dataSource, keyword, limit, offset, statistics, audit }, dispatch, loading }) => {
    const [form] = Form.useForm();
    useEffect(() => {
        form.setFieldsValue({ audit: 1 });
    }, []);
    const search = () => {
        form.validateFields().then(values => {
            const { keyword, audit } = values;
            dispatch({
                type: 'expertList/getExpertList',
                payload: {
                    keyword,
                    limit,
                    offset,
                    audit,
                },
            });
        });
    };
    const empty = () => {
        form.resetFields();
        dispatch({
            type: 'expertList/getExpertList',
            payload: {
                keyword: '',
                limit: 10,
                offset: 0,
            },
        });
    };
    const searchByOffset = (offset) => {
        dispatch({
            type: 'expertList/getExpertList',
            payload: {
                keyword,
                limit,
                offset: offset - 1,
            },
        });
    };
    const setProductStatus = (item) => {
        const params = {
            id: item._id,
            // audit: item.status === 1 ? 0 : 1,
        };
        dispatch({
            type: 'ProductList/updateProduct',
            payload: params,
            callback: (res) => {
                dispatch({
                    type: 'ProductList/getProductList',
                    payload: {
                        limit: 15,
                        offset: 0,
                        audit: 1,
                    },
                });
            },
        });
    };
    const deleteProduct = (item) => {
        dispatch({
            type: 'ProductList/removeProduct',
            payload: {
                id: item._id,
            },
            callback: (response) => {
                dispatch({
                    type: 'ProductList/getProductList',
                    payload: {
                        limit: 10,
                        offset: 0,
                    },
                });
            },
        });
    };
    const columns = [
        {
            title: '头像',
            align: 'left',
            render: (item) => {
                return (
                    <img style={{width:'80px',height:'80px',borderRadius:'50%',objectFit:'cover'}} src={item.photo}/>
                );
            },
            width: '15%'
        },
        {
            title: '姓名',
            align: 'left',
            dataIndex: 'name',
            width: '15%'
        },
        {
            title: '职位',
            align: 'left',
            render: (item) => {
                return (
                    <div>
                        {item.title}
                    </div>
                );
            },
            width: '10%'
        },
        {
            title: '研究领域',
            dataIndex: 'research_area',
            width: '15%'
        },
        {
            title: '状态',
            dataIndex: 'audit',
            align: 'left',
            render: (status) => {
                let statusHtml = '';
                switch (status) {
                    case 1:
                        return (<Tag color="#f50">待处理</Tag>);
                        break;
                    case 2:
                        return (<Tag color="#2db7f5">已审核</Tag>);
                        break;
                    default:
                        statusHtml = '--';
                }
                return (
                    <div>
                        {statusHtml}
                    </div>
                );
            },
        },
        {
            title: '创建时间',
            dataIndex: 'created_time',
            align: 'left',
            render: (created_time) => moment(created_time).format('YYYY-MM-DD hh:mm:ss'),
            width: '15%'
        },
        {
            title: '操作',
            align: 'left',
            render: (item) => {
                return (
                    <div>
                        <Link to={{
                            pathname: '/expert-manage/edit',
                            state: { fromDashboard: true },
                            query: { id: item._id },
                        }} style={{ marginRight: '10px' }}>编辑</Link>
                        {/* <Link to={{
                            pathname: '/news-manage/news/detail',
                            state: { fromDashboard: true },
                            query: { id: item._id },
                        }} style={{ marginRight: '10px' }}>详情</Link>
                        <Button type="link"
                            style={{ padding: '0' }}
                            onClick={() => setProductStatus(item)}>{item.status === 1 ? '上架' : '下架'}</Button>*/}
                        <Button type="link" onClick={() => deleteProduct(item)}>删除</Button>
                    </div>
                );
            },
        },
    ];
    const audit_states = [{
        _id: 1,
        name: '待审核'
    }, {
        _id: 2,
        name: '已审核'
    }, {
        _id: 3,
        name: '已忽略'
    }];

    const auditChange = (value) => {
        dispatch({
            type: 'ProductList/setAudit',
            payload: value
        });
        // dispatch({
        //     type: 'ProductList/getProductList',
        //     payload: {
        //         audit: value
        //     }
        // });
    }

    return (
        <div className={styles.pageContainer}>
            <div className={styles.pageContainerFilter}>
                <Form
                    layout="inline"
                    form={form}
                >
                    <Form.Item
                        label="审核状态"
                        name="audit"
                    >
                        <Select
                            placeholder="请选择"
                            onChange={auditChange}
                        >
                            {
                                audit_states.map(item => <Option key={item._id} value={item._id}>{item.name}</Option>)
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="关键字"
                        name="keyword"
                    >
                        <Input placeholder="输入专家姓名" />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" style={{ marginRight: '16px' }} onClick={search}>查询</Button>
                        <Button type="primary" style={{ marginRight: '16px' }} onClick={empty}>清空</Button>
                        <Button type="primary" style={{ marginRight: '16px' }} onClick={empty}>
                            <Link style={{ color: '#fff' }} to={{
                                pathname: '/expert-manage/add',
                                state: { fromDashboard: true },
                                // query: { shop_id: item.id, shop_name: item.name },
                            }}>新增</Link>
                        </Button>
                        <Tag color="#108ee9">{`已审核数量:${statistics.total_audited}`}</Tag>
                        <Tag color="#87d068">{`待审核数量:${statistics.total_has_no_audit}`}</Tag>
                    </Form.Item>
                </Form>
            </div>
            <div className={styles.pageContainerTable}>
                <Table
                    bordered={false} // 是否有边框
                    rowKey='_id' // 唯一key值
                    loading={loading} // 加载动画
                    columns={columns} // 表头
                    dataSource={dataSource.list}
                    pagination={{
                        total: dataSource.total,// 总记录数
                        defaultPageSize: 10, // 默认显示条数
                        showQuickJumper: true, // 快速跳转
                        // showSizeChanger: true, // 一页展示数据条数
                        onChange: (offset) => searchByOffset(offset),
                        showTotal: () => {
                            return `共${dataSource.total}条`;
                        },
                    }}
                />
            </div>
        </div>
    );
};

export default connect(({ expertList, dispatch, loading }) => ({
    expertList,
    dispatch,
    loading: loading.effects['expertList/getExpertList'],
}))(Product);
